<template>
  <div>
    <!-- 地图 -->
    <div class="header_box_content">
      <div id="container" v-if="showMap" style="width: 100%"></div>
      <!-- 今日报警 -->

      <div class="absolute2 el_table100">
        <div class="fullScreen selectBack">
          <el-radio-group v-model="selectAll" @change="handleRadio" class="display_flex3 justifycontent">
            <el-radio label="2" size="large">报警</el-radio>
            <el-radio label="1" size="large">全部</el-radio>
          </el-radio-group>
        </div>
        <div class="cen-header fr display_flex3 ">
          <div class="display_flex3 align-items model_head" v-for="(item, index) in electricityMonthInfo">
            <img v-if="item.groupName.indexOf('移动') != -1" src="../../assets/img/tower1.png" alt=""
              class="source_head_icon" />
            <img v-if="item.groupName.indexOf('联通') != -1" src="../../assets/img/tower2.png" alt=""
              class="source_head_icon" />
            <img v-if="item.groupName.indexOf('电信') != -1" src="../../assets/img/tower3.png" alt=""
              class="source_head_icon" />
            <img v-if="item.groupName.indexOf('广电') != -1" src="../../assets/img/tower4.png" alt=""
              class="source_head_icon" />
            <img v-if="item.groupName.indexOf('铁通') != -1" src="../../assets/img/tower5.png" alt=""
              class="source_head_icon" />
            <img v-if="item.groupName.indexOf('公共') != -1" src="../../assets/img/tower6.png" alt=""
              class="source_head_icon" />
            <img v-if="item.groupName.indexOf('其他') != -1" src="../../assets/img/tower7.png" alt=""
              class="source_head_icon" />
            <div>
              <div :class="'model_value ' + 'color' + Number(index + 1)">
                {{ item.totalValue }}
              </div>
              <div>{{ item.groupName }}</div>
            </div>
          </div>
        </div>
        <div class="fullScreen" @click="handlefullScreen">
          {{ fullscreenName }}
        </div>
      </div>
      <div :class="show_left
        ? ' realTimeAlarm1 ' + ' monitor ' + 'panelbackImage1 ' + ' panel '
        : '  show_inner_left_project3 show_top_height' +
        ' monitor ' +
        'panelbackImage1 ' +
        ' panel '
        ">

        <i class="el-icon-d-arrow-left" v-if="show_left" @click="handleleft"></i>
        <i class="el-icon-d-arrow-right" v-else @click="handleleft"></i>
        <div class="inner" v-if="show_left">
          <!-- <img src="./img/mass0.png" style="width: 150px; height: 150px" /> -->
          <span class="schart_title panel_title" @click="alarmMgt()">实时报警列表</span>
          <el-scrollbar height="100%">
            <div v-for="(item, index) in alarmInfo" :key="index">
              <div class="content" style="display: block" @click.stop="handleAlarmDetail(item)">
                <div class="police_head">
                  <div class="police_data1">{{ item.data }}</div>
                </div>
                <div class="police_info display_spacebetween">
                  <div>
                    <span>单位：</span><span>{{ item.office }}{{ item.branchOffice }}</span>
                  </div>
                  <i class="el-icon-reading" @click.stop="handlelat_lng(item, item.lng, item.lat)"
                    @mouseout="handlemouseout"></i>
                </div>
                <div class="police_info">
                  <span>地址：</span><span>{{ item.province }}{{ item.city }}{{ item.building
                  }}{{ item.floor }}{{ item.roomNum }}</span>
                </div>
                <div class="police_info">
                  <span>状态：</span><span>{{ item.alarmTypeName }}</span>
                </div>
                <div class="police_info">
                  <span>报警设备：</span><span>{{ item.deviceName }}</span>
                </div>
                <div class="police_info">
                  <span>设备ID：</span><span>{{ item.imei }}</span>
                </div>
                <div class="police_info">
                  <span>报警数值：</span><span>{{ item.alarmValue }}</span>
                </div>
              </div>
            </div>
          </el-scrollbar>
          <div class="view_more" @click="handle_more">查看更多>></div>
        </div>
      </div>
      <div :class="show_right
        ? ' inner ' + ' monitor4 ' + 'panelbackImage1 ' + '  '
        : 'show_inner_left2' + ' monitor4 ' + 'panelbackImage1 ' + '  '
        ">

        <!-- <span class="schart_title schart_title1" v-show="show_right">报警统计</span> -->

        <div class="schart_box" style="width: 100%; height: 100%" v-show="show_right">
          <!-- <div v-show="is_echart" id="echartContainer1" style="height: 300px; top: 30px"></div> -->
          <div v-show="is_echart" id="echartDeviceline" style="width: 100%; height: 100%"></div>
        </div>
        <!-- <i class="el-icon-caret-right" style="left: 0px;top: 0px;" v-if="show_right" @click="handleRight"></i>
        <i class="el-icon-caret-left" style="right: 0px" v-else @click="handleRight"></i> -->
      </div>

      <!-- <div :class="
        show_right
          ? ' inner ' +
          ' monitor5 ' +
          'panelbackImage1 ' +
          ' panel ' +
          ' column_top'
          : 'show_inner_left_project2' +
          ' monitor5 ' +
          'panelbackImage1 ' +
          ' panel ' +
          ' column_top'
      ">
        <div class="inner" v-if="show_right">
          <div>
            <div class="tAlarm_title3 tAlarm_margin">项目概况</div>
            <div class="todayA_box">
              <div class="todayA_cont">
                <div>单位总数</div>
                <div>
                  <span class="tAlarm3">{{ deviceCount.sumRegion }}</span>家
                </div>
              </div>
              <div class="todayA_cont">
                <div>设备总数</div>
                <div>
                  <span class="tAlarm3">{{ deviceCount.sumDevice }}</span>个
                </div>
              </div>
              <div class="todayA_cont">
                <div>注册用户总数</div>
                <div>
                  <span class="tAlarm3">{{ deviceCount.sumUser }}</span>人
                </div>
              </div>
            </div>
          </div>

          <div>
            <div class="tAlarm_title4 tAlarm_margin">设备统计</div>
            <div class="todayA_box">
              <div class="todayA_cont" @click="handleOnLine">
                <div>在线监测装置</div>
                <div>
                  <span class="tAlarm4">{{ deviceCount.sumMonitor }}</span>个
                </div>
              </div>
              <div class="todayA_cont" @click="handledetector">
                <div>故障电弧探测器</div>
                <div>
                  <span class="tAlarm4">{{ deviceCount.sumArcFault }}</span>个
                </div>
              </div>
              <div class="todayA_cont" @click="handleArc">
                <div>灭弧</div>
                <div>
                  <span class="tAlarm4">{{
                    deviceCount.sumArcExtinguishing
                  }}</span>个
                </div>
              </div>
              <div class="todayA_cont" @click="handlehost">
                <div>智慧主机</div>
                <div>
                  <span class="tAlarm4">{{ deviceCount.sumRtu }}</span>个
                </div>
              </div>
              <div class="todayA_cont" @click="handlebreaker">
                <div>智能断路器</div>
                <div>
                  <span class="tAlarm4">{{ deviceCount.sumSwitch }}</span>个
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <div class="monitor panel panelbackImage1 column_top2" :class="show_right
        ? ' inner ' +
        ' monitor6 ' +
        'panelbackImage1 ' +
        ' panel ' +
        ' column_top2'
        : 'show_inner2' +
        ' monitor6 ' +
        'panelbackImage1 ' +
        ' panel ' +
        ' column_top2'
        ">
        <div class="inner" v-show="show_right">
          <div class="schart_title2">本月电量</div>
          <div class="display_flex3 space-around margintop20 ">
            <div class="display_flex3 justify-content-center align-items justify-items-center column carrierPower">
              <img src="../../assets/img/operation.png" class="operationImg">
              <div class="margintop20">运营商电量分布</div>
              <div class="carrier_button margintop20" @click="handleView(1)">点击查看</div>
            </div>
            <div class="display_flex3 justify-content-center align-items justify-items-center column carrierPower">
              <img src="../../assets/img/baseStation.png" class="operationImg">
              <div class="margintop20">基站电量分布</div>
              <div class="carrier_button2 margintop20" @click="handleView(2)">点击查看</div>
            </div>
          </div>
          <!--报警  -->
          <!-- <div>
            <div class="tAlarm_title1 tAlarm_margin">报警</div>
            <div class="todayA_box">
              <div class="todayA_cont" @click="handleAlarm(1)">
                <div>总报警数</div>
                <div>
                  <span class="tAlarm">{{ alarmSum.allAlarmNum }}</span>起
                </div>
              </div>
              <div class="todayA_cont" @click="handleAlarm(2)">
                <div>待处理</div>
                <div>
                  <span class="tAlarm">{{ alarmSum.newAlarm }}</span>起
                </div>
              </div>
              <div class="todayA_cont" @click="handleAlarm(3)">
                <div>已处理</div>
                <div>
                  <span class="tAlarm">{{ alarmSum.handledAlarm }}</span>起
                </div>
              </div>
            </div>
          </div> -->
          <!-- 故障 -->
          <!-- <div>
            <div class="tAlarm_title2">故障</div>
            <div class="todayA_box">
              <div class="todayA_cont">
                <div>总故障数</div>
                <div><span class="tAlarm1">257</span>起</div>
              </div>
              <div class="todayA_cont">
                <div>待处理</div>
                <div><span class="tAlarm1">14</span>起</div>
              </div>
              <div class="todayA_cont">
                <div>已处理</div>
                <div><span class="tAlarm1">243</span>起</div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <source-Charts v-if="viewEchart" :viewEchart="viewEchart" @handleclose="handleclose"
      :dataList="dataList"></source-Charts>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; //高德地图
import { nextTick, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import sourceCharts from "../../components/source_charts.vue";
import { useRouter } from "vue-router";
import { getAMapLoader2 } from "../../assets/js/dictionaries";
// import { citys } from "./citys.js";
import api from "../../api/api";
// import { bd_decrypt } from "../../assets/js/dictionaries";
var projectId, projectobj;
var map,
  echartDeviceoption,
  myChartoption,
  createInfoWindow,
  marker,
  myChart,
  echartDevice;
export default {
  name: "dashboard",
  components: { sourceCharts },
  data() {
    return {
      electricityMonthInfo: [],
      indexData: null
    };
  },
  mounted() {
    projectId = Number(localStorage.getItem("projectId"));
    // 基于准备好的dom，初始化echarts实例
    // myChart = this.$echarts.init(document.getElementById("echartContainer1"));
    echartDevice = this.$echarts.init(
      document.getElementById("echartDeviceline")
    );
    //   var powerC = this.$echarts.init(
    //     document.getElementById("powerConsumption")
    //   );
    // 绘制图表
    echartDeviceoption = {
      title: {
        text: '月用电统计',
        textStyle: {
          color: "#ffffff",
        },
        x: "center",

      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        },
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '15%',
        top: '13%',
        containLabel: true
      },
      legend: {
        data: [],
        y: 'bottom',
        textStyle: {
          color: "#ffffff", fontWeight: "normal",
        },
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false, axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,0.8)',

              fontWeight: "normal",
              fontSize: '14'
            }
          },
          data: []
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: '14',
              fontWeight: "normal",
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
              fontWeight: "normal",
            }
          },
          //网格线
          splitLine: {
            lineStyle: {
              color: '#fff'
            }
          },
        }
      ],
      series: []
    };
    // 绘制图表
    myChartoption = {
      title: {
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "right",
        top: -5,
        textStyle: {
          color: "#ffffff",
          fontSize: "10",
        },
      },
      series: [
        {
          type: "pie",
          radius: "70%",
          center: ["45%", "55%"],
          label: {
            normal: {
              position: "inner",
              show: false,
            },
          },
          data: [],
          emphasis: {},
        },
      ],
    };
    // myChartoption.series[0].data = [];
    api
      .getListAPI("backup/indexData?projectId=" + projectId, {})
      .then((res) => {
        var alarmSum = res.data.data.alarmSum;
        this.indexDataList = res.data.data;
        var that = this;
        api
          .getListAPI("backup/indexData/electricityMonthInfo?areaCode=" + that.indexDataList.areaList[0], {})
          .then((res) => {
            console.log(res)
            let legendArr = [];
            let xAxisArr = [];
            if (res.data.data.length > 0) {
              for (var i = 0; i < res.data.data.length; i++) {
                if (i < 7) {
                  that.electricityMonthInfo.push(res.data.data[i])
                }
                if (i < 6) {
                  echartDeviceoption.series.push({
                    name: 'Search Engine',
                    type: 'line',
                    // stack: 'Total',
                    symbol: 'circle',
                    label: {
                      show: false,
                      position: 'top',
                      textStyle: {
                        color: 'rgba(255,255,255,0.8)',
                        fontWeight: "normal",
                        fontSize: '14'
                      }
                    },
                    areaStyle: {},
                    emphasis: {
                      focus: 'series'
                    },
                    data: []
                  })
                  legendArr.push(res.data.data[i].groupName);
                  if (res.data.data[i].children && res.data.data[i].children.length > 0) {
                    for (var j = 0; j < res.data.data[i].children.length; j++) {
                      echartDeviceoption.series[i].data.push(res.data.data[i].children[j].itemValue);
                      if (i == 0) {
                        xAxisArr.push(res.data.data[i].children[j].itemName)
                      }
                    }
                  }
                }
              }
            } else {
              that.electricityMonthInfo = [{
                groupName: '移动用电', totalValue: 0
              }, {
                groupName: '联通用电', totalValue: 0
              }, {
                groupName: '电信用电', totalValue: 0
              }, {
                groupName: '铁通用电', totalValue: 0
              }, {
                groupName: '公共用电', totalValue: 0
              }, {
                groupName: '其他用电', totalValue: 0
              }]
            }

            echartDeviceoption.legend.data = legendArr;
            if (legendArr.length > 0) {
              echartDeviceoption.series[0].name = legendArr[0];
              echartDeviceoption.series[1].name = legendArr[1];
              echartDeviceoption.series[2].name = legendArr[2];
              echartDeviceoption.series[3].name = legendArr[3];
              echartDeviceoption.series[4].name = legendArr[4];
              echartDeviceoption.series[5].name = legendArr[5];
            }
            echartDeviceoption.xAxis[0].data = xAxisArr;
            // echartDeviceoption.series[0].data = [];
            echartDevice.setOption(echartDeviceoption);
            window.addEventListener("resize", function () {
              echartDevice.resize();
            });
          })
          .catch((err) => {
            console.log(err);
          });
        if (res.data.code == 1) {
          // myChartoption.series[0].data = [
          //   { value: alarmSum.alarmL1, name: "一级报警" },
          //   { value: alarmSum.alarmL2, name: "二级报警" },
          //   { value: alarmSum.alarmL3, name: "三级报警" },
          //   { value: alarmSum.alarmL4, name: "四级报警" },
          // ];
        }
      })
      .catch((err) => {
        console.log(err);
      });
    // echartDeviceoption.series[0].data = [];

  },
  methods: {},
  setup(prop, context) {
    projectId = Number(localStorage.getItem("projectId"));
    projectobj = JSON.parse(localStorage.getItem("projectobj"));
    console.log(projectobj);
    const router = useRouter();
    const viewEchart = ref(false);
    let center_lng = projectobj.lng == 0 ? "116.428147" : projectobj.lng;
    let center_lat = projectobj.lat == 0 ? "39.929257" : projectobj.lat;
    if (center_lng == 0 || !center_lng || center_lat == 0 || !center_lat) {
      center_lng = "116.428147";
      center_lat = "39.929257";
    }
    const log_lat = ref([center_lng, center_lat]);
    console.log(log_lat.value);
    const AMap_value = ref();
    const is_show_map = ref(true);
    var title = "",
      content = [];
    // 地图

    const getMap = (AMap, log_lat) => {
      map = new AMap.Map("container", {
        zoom: projectobj.mapLevel ? projectobj.mapLevel : 0, //级别
        center: log_lat, //中心点坐标
        viewMode: "3D", //使用3D视图
        features: ["bg", "road", "building"],
        mapStyle: 'amap://styles/blue',
      });
      map.clearInfoWindow();
    };
    const alarmInfo = ref([]);
    const alarmSum = ref({});
    const deviceCount = ref({});
    const citys = ref([]);
    const mapInfoList = ref([]);
    const selectAll = ref("2");
    const indexData = ref();
    const showMap = ref(false);
    const getAMapLoader = () => {
      getAMapLoader2().then((AMap) => {
        getMap(AMap, log_lat.value);
        AMap_value.value = AMap;
        getMassMark(mapInfoList.value, AMap, map);
      })
      // AMapLoader.reset();
      // AMapLoader.load({
      //   key: "e6a43aa4581d0cb826ce01fb6f3c7eae", // 申请好的Web端开发者Key，首次调用 load 时必填
      //   version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      //   plugins: ['AMap.Map', 'AMap.ControlBar', 'AMap.ToolBar'],
      //   Loca: {
      //     // 是否加载 Loca， 缺省不加载
      //     version: "2.0.0", // Loca 版本，缺省 1.3.2
      //   },
      // })
      //   .then((AMap) => {
      //     getMap(AMap, log_lat.value);
      //     AMap_value.value = AMap;

      //     getMassMark(mapInfoList.value, AMap, map);
      //   })
      //   .catch((e) => {
      //     ElMessage.error(e.message);
      //   });
    };
    // 获取表格数据
    const getData = () => {
      api
        .getListAPI("backup/indexData?projectId=" + projectId, {})
        .then((res) => {
          if (res.data.code == 1) {
            var lnglat = [];
            for (var i = 0; i < res.data.data.alarmInfo.length; i++) {
              if (res.data.data.alarmInfo[i].alarmState == 1) {
                if (res.data.data.alarmInfo[i].alarmLevel == 1) {
                  res.data.data.alarmInfo[i].style = 0;
                } else if (res.data.data.alarmInfo[i].alarmLevel == 2) {
                  res.data.data.alarmInfo[i].style = 1;
                } else if (res.data.data.alarmInfo[i].alarmLevel == 3) {
                  res.data.data.alarmInfo[i].style = 2;
                } else if (res.data.data.alarmInfo[i].alarmLevel == 4) {
                  res.data.data.alarmInfo[i].style = 3;
                }
              } else {
                res.data.data.alarmInfo[i].style = 4;
              }

              var lnglat = bd_decrypt(
                res.data.data.alarmInfo[i].lng,
                res.data.data.alarmInfo[i].lat
              );
              res.data.data.alarmInfo[i].lnglat = lnglat.map(function (item) {
                return item - 0;
              });
              res.data.data.alarmInfo[i].address =
                res.data.data.alarmInfo[i].province +
                res.data.data.alarmInfo[i].city +
                res.data.data.alarmInfo[i].branchOffice +
                res.data.data.alarmInfo[i].building;
              // citys.value.push({
              //   lnglat: a,
              //   style: 0,
              //   name: "",
              // });
            }
            indexData.value = res.data.data;
            alarmInfo.value = res.data.data.alarmInfo;
            getAllAlarm();
            showMap.value = true;
            getAMapLoader();
            // mapInfoList.value = res.data.data.alarmInfo;
            alarmSum.value = res.data.data.alarmSum;
            deviceCount.value = res.data.data.deviceCount;

            // console.log(mapInfoList.value);
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getData();

    const getAllEquipment = () => {
      mapInfoList.value = [];
      let lngLatInfo = indexData.value.lngLatInfo;
      if (lngLatInfo.arcExtinguishing.length > 0) {
        for (var i = 0; i < lngLatInfo.arcExtinguishing.length; i++) {
          lngLatInfo.arcExtinguishing[i].style = 4;
          lngLatInfo.arcExtinguishing[i].alarmLevel = 3;
          var lnglat = bd_decrypt(
            lngLatInfo.arcExtinguishing[i].lng,
            lngLatInfo.arcExtinguishing[i].lat
          );
          lngLatInfo.arcExtinguishing[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
        }
      }
      if (lngLatInfo.arcFault.length > 0) {
        for (var i = 0; i < lngLatInfo.arcFault.length; i++) {
          lngLatInfo.arcFault[i].style = 4;
          lngLatInfo.arcFault[i].alarmLevel = 3;
          var lnglat = bd_decrypt(
            lngLatInfo.arcFault[i].lng,
            lngLatInfo.arcFault[i].lat
          );
          lngLatInfo.arcFault[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
        }
      }
      if (lngLatInfo.monitor.length > 0) {
        for (var i = 0; i < lngLatInfo.monitor.length; i++) {
          lngLatInfo.monitor[i].style = 4;
          lngLatInfo.monitor[i].alarmLevel = 3;
          var lnglat = bd_decrypt(
            lngLatInfo.monitor[i].lng,
            lngLatInfo.monitor[i].lat
          );
          lngLatInfo.monitor[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
        }
      }
      if (lngLatInfo.rtuInfo.length > 0) {
        for (var i = 0; i < lngLatInfo.rtuInfo.length; i++) {
          lngLatInfo.rtuInfo[i].style = 4;
          lngLatInfo.rtuInfo[i].alarmLevel = 3;
          var lnglat = [lngLatInfo.rtuInfo[i].lng, lngLatInfo.rtuInfo[i].lat];
          lngLatInfo.rtuInfo[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
          lngLatInfo.rtuInfo[i].address =
            lngLatInfo.rtuInfo[i].building +
            lngLatInfo.rtuInfo[i].floor +
            lngLatInfo.rtuInfo[i].roomNum;
          lngLatInfo.rtuInfo[i].deviceName = lngLatInfo.rtuInfo[i].rtuName;
        }
      }
      //  10001 粒子计数器  10002 温湿度传感器  10003 烟感
      if (lngLatInfo.iotDevice && lngLatInfo.iotDevice.length > 0) {
        for (var i = 0; i < lngLatInfo.iotDevice.length; i++) {
          lngLatInfo.iotDevice[i].style = 4;
          lngLatInfo.iotDevice[i].alarmLevel = 3;
          var lnglat = [
            lngLatInfo.iotDevice[i].lng,
            lngLatInfo.iotDevice[i].lat,
          ];
          lngLatInfo.iotDevice[i].lnglat = lnglat.map(function (item) {
            return item - 0;
          });
          lngLatInfo.iotDevice[i].address =
            lngLatInfo.iotDevice[i].building +
            lngLatInfo.iotDevice[i].floor +
            lngLatInfo.iotDevice[i].roomNum;
          lngLatInfo.iotDevice[i].deviceName =
            lngLatInfo.iotDevice[i].devType == 10001
              ? "粒子计数器"
              : lngLatInfo.iotDevice[i].devType == 10002
                ? "温湿度传感器"
                : lngLatInfo.iotDevice[i].devType == 10003
                  ? "烟感"
                  : "";
        }
      }
      var e = [];
      var a = e.concat(indexData.value.alarmInfo);
      var b = a.concat(lngLatInfo.arcExtinguishing);
      var c = b.concat(lngLatInfo.arcFault);
      var d = c.concat(lngLatInfo.monitor);
      var e = d.concat(lngLatInfo.iotDevice);
      mapInfoList.value = e.concat(lngLatInfo.rtuInfo);
      //  console.log(mapInfoList.value)
    };
    const getAllAlarm = () => {
      mapInfoList.value = [];
      var e = [];
      mapInfoList.value = e.concat(indexData.value.alarmInfo);
    };
    const handleRadio = (e) => {
      showMap.value = false;
      if (e == 1) {
        getAllEquipment();
        setTimeout(function () {
          showMap.value = true;
          getAMapLoader();
        }, 300);
      } else {
        getAllAlarm();
        setTimeout(function () {
          showMap.value = true;
          getAMapLoader();
        }, 300);
      }
    };
    const bd_decrypt = (bd_lng, bd_lat) => {
      var X_PI = (Math.PI * 3000.0) / 180.0;
      var x = bd_lng - 0.0065;
      var y = bd_lat - 0.006;
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
      var gg_lng = z * Math.cos(theta);
      var gg_lat = z * Math.sin(theta);
      var lnglat = [gg_lng, gg_lat];
      return lnglat;
    };
    const getMassMark = (citys, AMap, map) => {
      const style = [
        {
          url: "../../src/assets/img/mark_1.png", //红色
          anchor: new AMap.Pixel(6, 6),
          size: new AMap.Size(18, 30),
        },
        {
          url: "../../src/assets/img/mark_2.png", //黄色
          anchor: new AMap.Pixel(4, 4),
          size: new AMap.Size(18, 30),
        },
        {
          url: "../../src/assets/img/mark_3.png", //蓝色
          anchor: new AMap.Pixel(3, 3),
          size: new AMap.Size(18, 30),
        },
        {
          url: "../../src/assets/img/mark_4.png", //灰色
          anchor: new AMap.Pixel(3, 3),
          size: new AMap.Size(18, 30),
        },
        {
          url: "../../src/assets/img/mark_5.png", //绿色
          anchor: new AMap.Pixel(3, 3),
          size: new AMap.Size(18, 30),
        },
      ];
      var mass = new AMap.MassMarks(citys, {
        opacity: 0.8,
        zIndex: 111,
        cursor: "pointer",
        style: style,
      });
      marker = new AMap.Marker({ content: " ", map: map });
      createInfoWindow = (title, content) => {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";
        //可以通过下面的方式修改自定义窗体的宽高
        //info.style.width = "400px";
        // info.style.background = "#4e546a";
        info.style.color = "#fff";
        info.style.padding = "10px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        top.style.display = "flex";
        closeX.className = "info-img";
        closeX.style.width = "17px";
        closeX.style.position = "absolute";
        closeX.style.right = "20px";
        // closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;
        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);

        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        // middle.style.backgroundColor = "#4e546a";
        middle.style.position = "relative";
        middle.style.marginTop = "20px";
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = "relative";
        bottom.style.top = "0px";
        bottom.style.margin = "0 auto";
        bottom.style.color = "#2261e5";
        bottom.onclick = handle_details;
        bottom.innerHTML = "详情";
        // info.appendChild(bottom);
        return info;
      };
      const flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      if (flag) {
        // 移动端打开
        mass.on("click", function (e) {
          marker.setPosition(e.data.lnglat);
          getpopu(e.data);
          var infoWindow = new AMap.InfoWindow({
            // isCustom: true, //使用自定义窗体
            content: createInfoWindow(title, content.join("<br/>")),
            // offset: new AMap.Pixel(16, -45),
          });
          infoWindow.open(map, marker.getPosition());
        });
      } else {
        // PC端打开
        mass.on("mouseover", function (e) {
          map.clearInfoWindow();
          marker.setPosition(e.data.lnglat);
          getpopu(e.data);
          var infoWindow = new AMap.InfoWindow({
            // isCustom: true, //使用自定义窗体
            content: createInfoWindow(title, content.join("<br/>")),
            // offset: new AMap.Pixel(16, -45),
          });
          infoWindow.open(map, marker.getPosition());
        });
        mass.on("mouseout", function (e) {
          map.clearInfoWindow();
        });
      }
      mass.setMap(map);
    };
    const getpopu = (obj) => {
      var province = obj.province || "";
      var city = obj.city || "";
      var office = obj.office || "";
      var branchOffice = obj.branchOffice || "";
      var building = obj.building || "";
      var floor = obj.floor || "";
      var roomNum = obj.roomNum || "";
      var alarmState = obj.alarmTypeName || "正常";
      content = [];
      if (selectAll.value == 1) {
        content.push("单位：" + obj.address);
      } else {
        content.push(
          "单位：" +
          province +
          city +
          office +
          branchOffice +
          building +
          floor +
          roomNum
        );
      }
      content.push("设备名称：" + obj.deviceName);
      var color_value = "";
      if (obj.alarmState == 0) {
        color_value = "#54ed52";
      } else {
        if (obj.alarmLevel == 1) {
          color_value = "red";
        } else if (obj.alarmLevel == 2) {
          color_value = "rgb(224 200 24)";
        } else if (obj.alarmLevel == 3) {
          color_value = "rgb(51 127 222)";
        } else if (obj.alarmLevel == 4) {
          color_value = "rgb(156 157 158)";
        }
      }
      content.push(
        "<span style='color:" +
        color_value +
        "'>状态：" +
        alarmState +
        "</span>"
      );
    };
    const handlemouseout = () => {
      map.clearInfoWindow();
    };
    const closeInfoWindow = () => {
      map.clearInfoWindow();
    };
    const handle_details = () => {
      // router.push("/alarm_detail");
    };
    const handleAlarm = (index) => {
      if (index == 3) {
        router.push("/alarmMgt?activeName=second");
      } else {
        router.push("/alarmMgt");
      }
    };
    const name = localStorage.getItem("ms_username");
    const role = name === "admin" ? "超级管理员" : "普通用户";

    const data = reactive([
      {
        name: "2018/09/04",
        value: 1083,
      },
      {
        name: "2018/09/05",
        value: 941,
      },
      {
        name: "2018/09/06",
        value: 1139,
      },
      {
        name: "2018/09/07",
        value: 816,
      },
      {
        name: "2018/09/08",
        value: 327,
      },
      {
        name: "2018/09/09",
        value: 228,
      },
      {
        name: "2018/09/10",
        value: 1065,
      },
    ]);

    const alarmMgt = () => {
      // router.push("/alarm_detail");
    };
    const handleAlarmDetail = (item) => {
      var row = JSON.stringify(item);
      router.push("/alarm_detail?alarmId=" + item.id);
    };
    const handlelat_lng = (item, lng, lat) => {
      if (lng) {
        getpopu(item);
        var lnglat = bd_decrypt(lng, lat);
        log_lat.value = lnglat;
        getMap(AMap_value.value, log_lat.value);
        getMassMark(mapInfoList.value, AMap_value.value, map);
        var infoWindow = new AMap.InfoWindow({
          // isCustom: true, //使用自定义窗体
          content: createInfoWindow(title, content.join("<br/>")),
          // offset: new AMap.Pixel(16, -45),
        });
        infoWindow.open(map, marker.getPosition());
      }
    };
    const show_right = ref(true);
    const show_left = ref(true);
    const handleRight = () => {
      show_right.value = !show_right.value;
    };
    const handleleft = () => {
      show_left.value = !show_left.value;
    };
    const handle_more = () => {
      router.push("/alarmMgt");
    };
    // const handlefullScreenMap = () => {
    //   router.push("/fullScreenMap");
    // };
    const handleOnLine = () => {
      router.push("/online_device");
    };
    const handledetector = () => {
      router.push("/fault_detector");
    };
    const handleArc = () => {
      router.push("/csa_device");
    };
    const handlehost = () => {
      router.push("/wisdom_host");
    };
    const handlebreaker = () => {
      router.push("/electric_eqt");
    };
    const fullscreen = ref(context.attrs.fullscreen);
    const fullscreenName = ref("查看全屏");
    const is_echart = ref(true);
    // 是否包含左侧菜单
    const ismenu = ref(context.attrs.ismenu);
    let element = document.documentElement;
    if (!ismenu.value) {
      is_echart.value = false;
      nextTick(function () {
        is_echart.value = true;
      })
      if (fullscreen.value) {
        fullscreenName.value = "查看全屏";
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        fullscreenName.value = "退出全屏";
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
    }
    const handlefullScreen = () => {
      fullscreen.value = !fullscreen.value;
      context.emit("handlefullScreen", fullscreen.value);
      if (!ismenu.value) {
        let element = document.documentElement;
        if (fullscreen.value) {
          fullscreenName.value = "查看全屏";
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          fullscreenName.value = "退出全屏";
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        fullscreen.value = !fullscreen.value;
      }
    };
    const handleclose = () => {
      viewEchart.value = false;
    }
    const dataList = ref([]);
    const handleView = (index) => {
      let url = "";
      dataList.value = [];
      if (index == 1) {
        url = "backup/indexData/electricityRoomGroup?areaCode=";
      } else {
        url = "backup/indexData/electricityAreaGroup?areaCode=";

      }
      api
        .getListAPI(url + indexData.value.areaList[0], {})
        .then((res) => {
          if (res.data.code == 1) {
            dataList.value = res.data.data;
            viewEchart.value = true;
          } else {
            ElMessage.error(res.data.message);
          }
        })
    }
    return {
      showMap,
      selectAll,
      name,
      data,
      role,
      log_lat,
      AMap_value,
      show_right,
      show_left,
      alarmSum,
      deviceCount,
      is_show_map,
      fullscreenName,
      viewEchart,
      dataList,
      is_echart,
      handlemouseout,
      alarmMgt,
      handleAlarm,
      handleOnLine,
      handledetector,
      handleArc,
      handlebreaker,
      handlehost,
      closeInfoWindow,
      handle_details,
      handleAlarmDetail,
      handlelat_lng,
      handleRight,
      handleleft,
      handle_more,
      handlefullScreen,
      handleRadio, handleclose,
      handleView,
      alarmInfo,
      value: "",
      listb: [
        {
          imgsrc:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          imgsrc:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/index.css";
@import "../../assets/css/common.css";
@import "../../assets/css/icono.min.css";
@import "../../assets/css/style.css";
@import "../../assets/css/home.less";
@import "../../assets/css/home1.less";

.header_box_content {
  width: 100%;
}

.realTimeAlarm1 {
  width: 30%;
}

&:deep(.monitor) {
  background-color: #18516A;
}

&:deep(.monitor4) {
  background-color: #18516A;
}

.selectBack {
  left: 20px !important;
  width: 120px;
  padding: 10px 10px;
  top: 11px;
}

.el-radio {
  color: #fff;
}

.el-icon-caret-right,
.el-icon-caret-left {
  position: absolute;
  width: 20px;
  left: -90px;
  top: -10px;
  color: rgb(128 255 255);
}

.echartDeviceline {
  width: 100%;
  position: absolute;
  bottom: 50px;
  top: 20px;
}

.carrierPower {
  width: 160px;
  height: 224px;
  background: rgba(101, 136, 202, 0.15);
  border: 1px solid #6588CA;
}

.schart_title2 {
  text-align: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #FFFFFF;
  padding-bottom: 20px;
  border-bottom: 1px solid #739ae463;
}

.operationImg {
  width: 80px;
  height: 80px;
}

.carrier_button {
  width: 120px;
  height: 40px;
  background: #6588CA;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

.carrier_button2 {
  width: 120px;
  height: 40px;
  background: #2B95CF;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}

&:deep(.monitor .inner) {
  background: none !important;
}
</style>
